<template>
    <div id="staff-manager-list">
        <main>
            <section v-for="(store, index) in storeList" :key="store.index" class="mt20">
                <h2 class="f18">{{store.storeName}}</h2>
                <ul>
                    <li v-for="(staff, key) in store.staffList" :key="staff.key">
                      <i class="iconfont f20">&#xe62d;</i>
                      <img src="./user_top.jpg" class="ml10"/>
                      <aside class="pl20">
                        <p class="f16">{{staff.name}} <span class="f14">({{staff.position}})</span></p>
                        <p class="f16 mt10">{{staff.phone}}</p>
                      </aside>
                    </li>
                </ul>
            </section>
        </main>
        <footer>
            <p @click="addStaff">新增人员</p>
        </footer>
    </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'staff-manger-list',
        data () {
          return {
              storeList: [ {id: 1,
                            storeName: '特了联发科的时候',
                            staffList: [
                                {id: 1, name: '张三', phone: '15879463456', position: '厨师'},
                                {id: 2, name: '李四', phone: '15285547498', position: '厨师'}
                            ]},
                            {id: 2,
                            storeName: '特了联发科的时候',
                            staffList: [
                                {id: 1, name: '张三', phone: '15879463456', position: '厨师'},
                                {id: 2, name: '李四', phone: '15285547498', position: '厨师'}
                            ]}
                        ]
          };
        },
        methods: {
          addStaff () {
            const url = './add-staff/main';
            wx.navigateTo({ url });
          }
        }
    };
</script>

<style lang="stylus" scoped>
    #staff-manager-list
        main
            width 92%; margin 0 auto; padding-bottom 100px;
            section
                border-radius 3px; padding 0 10px; background #fff;
                h2
                  line-height 50px; height 50px; font-weight bold;
                ul
                    border-top: #f3f3f3 solid 1px;
                    li
                        display flex; align-items center; padding 10px 0; border-bottom 1px solid #f3f3f3;
                        img
                            width 60px; border-radius 50%; border  2px solid  #f2f2f2; height 60px;
                        aside
                            flex 1;
                        i
                            color #949494;
        footer
            width: 92%;height: 80px;background: white;position: fixed;bottom: 0;left: 0;padding: 15px;
            p
                background: #41b962;display: block;height: 50px;font-size: 20px;color: white;line-height: 50px;text-align: center;border-radius: 3px; width 100%;
</style>
